"use client"

import BasicInfo from "@/components/module/basic-info";
import DetailInfo from "@/components/detail-info";
import {Button} from "@/components/ui/button";
import {useState} from "react";
import {DEFAULT_VALUE} from "@/lib/constants";
import Preview from "@/components/preview";

export default function Home() {
    const [basicData, setBasicData] = useState(DEFAULT_VALUE?.basicInfo);
    const [detailData, setDetailData] = useState(DEFAULT_VALUE?.detailInfo);

    const handleSave = () => {
        console.log({
            basicData,
            detailData
        })
    }

    return (
        <div className={'h-screen flex flex-col justify-center items-center'}>
            <main className={'w-full h-full bg-secondary grid grid-cols-1 gap-4'}>
                <div className={'bg-white p-4 space-y-4 shadow-sm overflow-auto'}>
                    <BasicInfo basicData={basicData} setBasicData={setBasicData}/>
                    <DetailInfo detailData={detailData} setDetailData={setDetailData}/>
                    <Button onClick={handleSave}>
                        保存
                    </Button>
                </div>
                <div className={'p-4 h-full overflow-auto flex justify-center items-start'}>
                    <Preview/>
                </div>
            </main>
        </div>
    );
}
